<script setup>
import { defineProps } from "vue";
const props = defineProps({
  carInfo: {
    type: Object,
    required: true,
  },
});

// function navigateToMore() {
//   uni.navigateTo({
//     url: "/pages/Rent/Detail/index",
//   });
// }
</script>
<template>
  <view>
    <div class="card-container">
			<div class="card">
				<div class="left-container">
					<div class="car-image"></div>
				</div>
				
				<div class="car-info">
				  <div class="title">{{props.carInfo.title}}</div>
				  <div class="detail">{{props.carInfo.detail}}</div>
					<div class="fee">{{props.carInfo.fee}}</div>
				</div>
			</div>
			<div class="info-list">
				<div class="info-item">
					<div class="info-title">续航里程</div>
					<div title="info">400km</div>
				</div>
				<div class="info-item">
					<div class="info-title">快充时长</div>
					<div title="info">暂无</div>
				</div>
				<div class="info-item">
					<div class="info-title">慢充时长</div>
					<div title="info">暂无</div>
				</div>
				<div class="info-item">
					<div class="info-title">轴距</div>
					<div title="info">2700mm</div>
				</div>
				<div class="op">
				  更多
				  <image
				    src="@/static/icon/chevron-right.png"
				    style="width: 10px; height: 10px"
				  ></image>
				</div>
			</div>
    </div>
  </view>
</template>

<style scoped>
.card-container {
	width: 100%;
	height: 158px;
	padding: 20px;
	margin-bottom: 10px;
	background-color: #f7fff3;
	border-radius: 10px;
	box-sizing: border-box;
}
.card {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.car-image {
  width: 100px;
  height: 90px;
  border-radius: 20px;
}

.fee {
  font-size: 16px;
  font-weight: 600;
	margin-bottom: 26px;
}

.car-info {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.title {
	font-size: 16px;
}

.detail {
	font-size: 12px;
	opacity: 0.5;
	margin-bottom: 13px;
}

.info-list {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 12px;
}

.info-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

</style>
